<template>
	<div class="wrapper">
		<!-- 顶部应用栏 -->
		<header class="mdc-top-app-bar">
			<div class="mdc-top-app-bar__row">
				<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
					<BackButton />
					<h1 class="mdc-top-app-bar__title">我的优惠券</h1>
				</section>
			</div>
		</header>

		<!-- 主要内容区域 -->
		<div class="main-content">
			<!-- 选项卡 -->
			<div class="tabs">
				<button 
					class="tab-button" 
					:class="{ active: activeTab === 'available' }"
					@click="activeTab = 'available'"
				>
					可用优惠券 ({{ availableCoupons.length }})
				</button>
				<button 
					class="tab-button" 
					:class="{ active: activeTab === 'used' }"
					@click="activeTab = 'used'"
				>
					已使用 ({{ usedCoupons.length }})
				</button>
				<button 
					class="tab-button" 
					:class="{ active: activeTab === 'expired' }"
					@click="activeTab = 'expired'"
				>
					已过期 ({{ expiredCoupons.length }})
				</button>
			</div>

			<!-- 可用优惠券列表 -->
			<div v-if="activeTab === 'available'" class="coupons-section">
				<div v-if="availableCoupons.length > 0" class="coupons-list">
					<div 
						class="coupon-card available"
						v-for="coupon in availableCoupons" 
						:key="coupon.couponId"
					>
						<div class="coupon-header">
							<div class="coupon-amount">
								<span class="currency">¥</span>
								<span class="amount">{{ coupon.discountAmount }}</span>
							</div>
							<div class="coupon-info">
								<h3 class="coupon-name">{{ coupon.couponName }}</h3>
								<p class="coupon-code">{{ coupon.couponCode }}</p>
							</div>
						</div>
						<div class="coupon-body">
							<p class="coupon-condition" v-if="coupon.minimumAmount > 0">
								满 ¥{{ coupon.minimumAmount }} 可用
							</p>
							<p class="coupon-condition" v-else>
								无门槛使用
							</p>
							<p class="coupon-expiry">
								有效期至: {{ formatDate(coupon.expiryDate) }}
							</p>
						</div>
						<div class="coupon-footer">
							<button class="btn-use" @click="selectCouponForOrder(coupon)">
								立即使用
							</button>
						</div>
					</div>
				</div>
				<div v-else class="empty-state">
					<i class="material-icons">card_giftcard</i>
					<p>暂无可用优惠券</p>
					<router-link to="/pointsstore" class="btn-go-redeem">
						去积分商店兑换
					</router-link>
				</div>
			</div>

			<!-- 已使用优惠券列表 -->
			<div v-if="activeTab === 'used'" class="coupons-section">
				<div v-if="usedCoupons.length > 0" class="coupons-list">
					<div 
						class="coupon-card used"
						v-for="coupon in usedCoupons" 
						:key="coupon.couponId"
					>
						<div class="coupon-header">
							<div class="coupon-amount">
								<span class="currency">¥</span>
								<span class="amount">{{ coupon.discountAmount }}</span>
							</div>
							<div class="coupon-info">
								<h3 class="coupon-name">{{ coupon.couponName }}</h3>
								<p class="coupon-code">{{ coupon.couponCode }}</p>
							</div>
						</div>
						<div class="coupon-body">
							<p class="coupon-status">已使用</p>
							<p class="coupon-used-date">
								使用时间: {{ formatDate(coupon.usedDate) }}
							</p>
						</div>
					</div>
				</div>
				<div v-else class="empty-state">
					<i class="material-icons">check_circle</i>
					<p>暂无已使用优惠券</p>
				</div>
			</div>

			<!-- 已过期优惠券列表 -->
			<div v-if="activeTab === 'expired'" class="coupons-section">
				<div v-if="expiredCoupons.length > 0" class="coupons-list">
					<div 
						class="coupon-card expired"
						v-for="coupon in expiredCoupons" 
						:key="coupon.couponId"
					>
						<div class="coupon-header">
							<div class="coupon-amount">
								<span class="currency">¥</span>
								<span class="amount">{{ coupon.discountAmount }}</span>
							</div>
							<div class="coupon-info">
								<h3 class="coupon-name">{{ coupon.couponName }}</h3>
								<p class="coupon-code">{{ coupon.couponCode }}</p>
							</div>
						</div>
						<div class="coupon-body">
							<p class="coupon-status">已过期</p>
							<p class="coupon-expiry">
								过期时间: {{ formatDate(coupon.expiryDate) }}
							</p>
						</div>
					</div>
				</div>
				<div v-else class="empty-state">
					<i class="material-icons">event_busy</i>
					<p>暂无已过期优惠券</p>
				</div>
			</div>
		</div>

		<!-- 底部导航 -->
		<AppFooter></AppFooter>
	</div>
</template>

<script>
	import AppFooter from '../components/AppFooter.vue'
	import BackButton from '../components/BackButton.vue'

	export default {
		name: 'MyCoupons',
		data: function() {
			return {
				coupons: [],
				activeTab: 'available',
				loading: false
			}
		},
		components: {
			AppFooter,
			BackButton
		},
		computed: {
			availableCoupons: function() {
				return this.coupons.filter(c => c.status === 1);
			},
			usedCoupons: function() {
				return this.coupons.filter(c => c.status === 2);
			},
			expiredCoupons: function() {
				return this.coupons.filter(c => c.status === 3);
			}
		},
		methods: {
			loadCoupons: function() {
				let user = this.$getSessionStorage('user');
				if (!user || !user.userId) {
					return;
				}

				this.loading = true;
				this.$axios.post('UserCouponController/all', this.$qs.stringify({
					userId: user.userId
				}), {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				})
				.then(resp => {
					if (resp.data && (resp.data.code === 200 || resp.data.code === '200')) {
						this.coupons = resp.data.result || [];
					}
				})
				.catch(err => {
					console.error('加载优惠券失败:', err);
					this.$toast?.error('加载优惠券失败');
				})
				.finally(() => {
					this.loading = false;
				});
			},
			formatDate: function(dateStr) {
				if (!dateStr) return '';
				const date = new Date(dateStr);
				return date.toLocaleDateString('zh-CN');
			},
			selectCouponForOrder: function(coupon) {
				// 保存选中的优惠券到sessionStorage
				this.$setSessionStorage('selectedCoupon', coupon);
				// 导航到订单页面
				this.$router.push('/orders');
			}
		},
		created() {
			let user = this.$getSessionStorage('user');
			if (user == null) {
				this.$router.push('/login');
				return;
			}
			this.loadCoupons();
		}
	}
</script>

<style scoped>
	.wrapper {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	/* 顶部应用栏 */
	.mdc-top-app-bar {
		background-color: #1976D2;
		color: white;
		position: sticky;
		top: 0;
		z-index: 100;
		box-shadow: 0 2px 4px rgba(0,0,0,0.1);
	}

	.mdc-top-app-bar__row {
		display: flex;
		align-items: center;
		height: 72px;
		padding: 0 20px;
	}

	.mdc-top-app-bar__section {
		display: flex;
		align-items: center;
		gap: 16px;
		flex-direction: row;
	}

	.mdc-top-app-bar__title {
		font-size: 22px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		line-height: 1;
	}

	/* 主要内容区域 */
	.main-content {
		padding: 0;
		padding-bottom: 120px;
	}

	/* 选项卡 */
	.tabs {
		display: flex;
		background-color: white;
		border-bottom: 1px solid #e0e0e0;
		position: sticky;
		top: 72px;
		z-index: 50;
	}

	.tab-button {
		flex: 1;
		padding: 16px;
		border: none;
		background: none;
		font-size: 14px;
		font-weight: 500;
		color: #666;
		cursor: pointer;
		border-bottom: 3px solid transparent;
		transition: all 0.3s ease;
	}

	.tab-button.active {
		color: #1976D2;
		border-bottom-color: #1976D2;
	}

	.tab-button:hover {
		background-color: #f5f5f5;
	}

	/* 优惠券列表 */
	.coupons-section {
		padding: 16px;
	}

	.coupons-list {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.coupon-card {
		background-color: white;
		border-radius: 12px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		display: flex;
		flex-direction: column;
		transition: all 0.3s ease;
	}

	.coupon-card:hover {
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		transform: translateY(-2px);
	}

	.coupon-card.available {
		border-left: 4px solid #4CAF50;
	}

	.coupon-card.used {
		border-left: 4px solid #999;
		opacity: 0.7;
	}

	.coupon-card.expired {
		border-left: 4px solid #f44336;
		opacity: 0.6;
	}

	.coupon-header {
		display: flex;
		gap: 16px;
		padding: 16px;
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		align-items: center;
	}

	.coupon-amount {
		display: flex;
		align-items: baseline;
		gap: 4px;
		min-width: 80px;
	}

	.currency {
		font-size: 16px;
		color: #644F1B;
		font-weight: 600;
	}

	.amount {
		font-size: 32px;
		color: #644F1B;
		font-weight: bold;
	}

	.coupon-info {
		flex: 1;
	}

	.coupon-name {
		font-size: 16px;
		font-weight: 600;
		margin: 0 0 4px 0;
		color: #333;
	}

	.coupon-code {
		font-size: 12px;
		color: #666;
		margin: 0;
		font-family: monospace;
	}

	.coupon-body {
		padding: 12px 16px;
		background-color: #fafafa;
		border-top: 1px solid #f0f0f0;
	}

	.coupon-condition {
		font-size: 14px;
		color: #333;
		margin: 0 0 4px 0;
	}

	.coupon-expiry {
		font-size: 12px;
		color: #999;
		margin: 0;
	}

	.coupon-status {
		font-size: 14px;
		font-weight: 600;
		color: #666;
		margin: 0 0 4px 0;
	}

	.coupon-used-date {
		font-size: 12px;
		color: #999;
		margin: 0;
	}

	.coupon-footer {
		padding: 12px 16px;
		display: flex;
		justify-content: flex-end;
	}

	.btn-use {
		padding: 8px 16px;
		background-color: #1976D2;
		color: white;
		border: none;
		border-radius: 6px;
		font-size: 14px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.btn-use:hover {
		background-color: #1565C0;
	}

	/* 空状态 */
	.empty-state {
		text-align: center;
		padding: 60px 20px;
		color: #999;
	}

	.empty-state .material-icons {
		font-size: 64px;
		margin-bottom: 16px;
		opacity: 0.5;
	}

	.btn-go-redeem {
		display: inline-block;
		margin-top: 16px;
		padding: 10px 20px;
		background-color: #1976D2;
		color: white;
		text-decoration: none;
		border-radius: 6px;
		font-weight: 600;
		transition: all 0.3s ease;
	}

	.btn-go-redeem:hover {
		background-color: #1565C0;
	}

	/* 响应式设计 */
	@media (max-width: 600px) {
		.coupon-header {
			flex-wrap: wrap;
		}

		.coupon-amount {
			width: 100%;
		}

		.coupon-info {
			width: 100%;
		}
	}
</style>
